import {Image, ScrollView, Swiper, SwiperItem, Text, View} from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, {Component} from 'react';
import * as T from '../types';
import actions from '../actions/index';
import {connect} from 'react-redux';
import {store2Props} from '../selectors';
import {_, WMkit, wxAuth} from 'wmkit';
import api from 'api';
import {AtTabs, AtTabsPane} from 'taro-ui';
import 'taro-ui/dist/style/components/tabs.scss';
import './tab.less';
import List from './list';

type ITabProps = T.IProps & T.ITabProps;
//@ts-ignore
@connect<Partial<ITabProps>, T.ITabState>(store2Props, actions)
export default class tab extends Component<Partial<ITabProps>, T.ITabState> {
  constructor(props) {
    super(props);
    this.state = {
      navBarHeight: 0,
      windowHeight: 0,
    };
  }

  componentDidMount() {
    this.getNavHeight();
  }

  getNavHeight() {
    let menuButtonObject = Taro.getMenuButtonBoundingClientRect();
    var sysinfo = Taro.getSystemInfoSync();
    let windowHeight = sysinfo.windowHeight;
    let statusBarHeight = sysinfo.statusBarHeight;
    let menuBottonHeight = menuButtonObject.height;
    let menuBottonTop = menuButtonObject.top;
    let navBarHeight = statusBarHeight + menuBottonHeight + (menuBottonTop - statusBarHeight) * 2;
    this.setState({
      navBarHeight,
      windowHeight,
    });
  }

  handleClick(value) {
    let {
      actions: {action},
    } = this.props;
    action.commonChange('main.current', value);
    action.commonChange('main.giftList', []);
    action.page();
  }

  renderList() {
    let {
      main: {current, tabList},
      actions: {action},
    } = this.props;
    let list = [];
    tabList.map((item, index) => {
      list.push(
        <AtTabsPane className="tabItem" current={current} index={index}>
          <List />
        </AtTabsPane>,
      );
    });
    return list;
  }

  render() {
    let {
      main: {current, tabList},
      actions: {action},
    } = this.props;
    return (
      <View className="tabs">
        <AtTabs className="tabsTitle" scroll current={current} tabList={tabList} onClick={this.handleClick.bind(this)}>
          {this.renderList()}
        </AtTabs>
      </View>
    );
  }
}
